<section class="content-wrap">
    <style>
        #editor {
            overflow: scroll;
            max-height: 300px
        }
    </style>
    <div class="container">
        <div class="row">
            <?php echo smiley_js(); ?>
            <main class="col-md-8 main-content">
                <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b
                                class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a data-edit="fontName Serif" style="font-family:'Serif'">Serif</a></li>
                            <li><a data-edit="fontName Sans" style="font-family:'Sans'">Sans</a></li>
                            <li><a data-edit="fontName Arial" style="font-family:'Arial'">Arial</a></li>
                            <li><a data-edit="fontName Arial Black" style="font-family:'Arial Black'">Arial Black</a>
                            </li>
                            <li><a data-edit="fontName Courier" style="font-family:'Courier'">Courier</a></li>
                            <li><a data-edit="fontName Courier New" style="font-family:'Courier New'">Courier New</a>
                            </li>
                            <li><a data-edit="fontName Comic Sans MS" style="font-family:'Comic Sans MS'">Comic Sans
                                    MS</a></li>
                            <li><a data-edit="fontName Helvetica" style="font-family:'Helvetica'">Helvetica</a></li>
                            <li><a data-edit="fontName Impact" style="font-family:'Impact'">Impact</a></li>
                            <li><a data-edit="fontName Lucida Grande" style="font-family:'Lucida Grande'">Lucida
                                    Grande</a></li>
                            <li><a data-edit="fontName Lucida Sans" style="font-family:'Lucida Sans'">Lucida Sans</a>
                            </li>
                            <li><a data-edit="fontName Tahoma" style="font-family:'Tahoma'">Tahoma</a></li>
                            <li><a data-edit="fontName Times" style="font-family:'Times'">Times</a></li>
                            <li><a data-edit="fontName Times New Roman" style="font-family:'Times New Roman'">Times New
                                    Roman</a></li>
                            <li><a data-edit="fontName Verdana" style="font-family:'Verdana'">Verdana</a></li>
                            <li><a data-edit="fontName Verdana" style="font-family:'Verdana'">Verdana</a></li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i
                                class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                            <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                            <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                            <li><a data-edit="code">Verdana</a></li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
                        <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
                        <a class="btn" data-edit="strikethrough" title="Strikethrough"><i
                                class="icon-strikethrough"></i></a>
                        <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i
                                class="icon-underline"></i></a>
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
                        <a class="btn" data-edit="insertorderedlist" title="Number list"><i
                                class="icon-list-ol"></i></a>
                        <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i
                                class="icon-indent-left"></i></a>
                        <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i
                                class="icon-align-left"></i></a>
                        <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i
                                class="icon-align-center"></i></a>
                        <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i
                                class="icon-align-right"></i></a>
                        <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i
                                class="icon-align-justify"></i></a>
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                        <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
                    </div>

                </div>

                <div id="editor" contenteditable="true"></div>
                <div class="col-xs-12 col-md-12" id="smiley_table">

                </div>
                <div class="row" style="margin-bottom: 20px;margin-top: 20px;margin-left: 20px">
                    <div class="col-xs-4 col-md-2">
                        <button type="button" class="btn btn-primary" id="editor_sumbit">提交</button>
                    </div>
                    <div class="col-xs-4 col-md-2">
                        <button type="button" class="btn btn-danger" id="editor_reset">重置</button>
                    </div>
                    <div class="col-xs-4 col-md-4">
                        <p id="editor_warning"></p>
                    </div>

                </div>
                <script>
                    $('#editor').wysiwyg();
                </script>
            </main>